<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加</title>
    <link rel="stylesheet" href="./5.13/styles/index.css">
</head>
<body>
      <main id="main">
         <form class="create">
             <div class="form-group">
     
                 <label>序号：</label>
                 <input  placeholder="DS-" type="text" class="form-control" v-model="newRole.id">
           </div>
           <div class="form-group">
                 <label>角色名：</label>
                 <input  placeholder="请输入角色名" type="text" class="form-control" v-model="newRole.name">
                 </div>
                 <div class="form-group">
                 <label>系列：</label>
                   <select class="form-control" v-model="newRole.series">
                       <option>雷</option>
                       <option>木</option>
                       <option>水</option>
                       <option>火</option>
                       <option>土</option>
                       <option>光</option>
                       <option>暗</option>
                   </select> 
                   </div>
                   <div class="form-group">

                   <label>擅长:</label>  
                   <select class="form-control" v-model="newRole.strongPoint" >
                       <option>攻击</option>
                       <option>防御</option>
                       <option>智力</option>
                       <option>体力</option>
                       <option>敏捷</option>
                       
                    </select> 
                </div>
                <div class="text-right">
                    <button type="button" class="btnbtn-success" @click="createRole" >创建角色</button> 
                </div>
         </form>
         <table class="table table-bordered">
             <thead>
                 <tr>
                     <th>序号</th>
                     <th>角色</th>
                     <th>系列</th>
                     <th>擅长</th>
                     <th class="w-164">操作</th>
                 </tr>
             </thead>
             <thead class="information">
      <tr v-for="roleItem in roleList">
          <td v-for="roles in roleItem">{{roles}}</td>
      </tr>
         </table>
         <div class="text-right">
               <button type="button" class="btn-rise" @click="upchange">升序</button>
               <button type="button" class="btn-drop" @click="downchge">降序</button>
         </div>
      </main>
    <script src="./5.13/plugins/vue.js"></script>
    <script src="./5.13/scripts/index.js"></script>
</body>
</html>